import React from 'react';
import { Row, Col} from 'antd'; 
import './index.less'
import axios from '../../axios';
import Utils from '../../utils/utils';
import { connect} from 'react-redux';
import { switchMenu} from './../../redux/action';
class Header extends React.Component{
    componentWillMount() {
        this.setState({
            userName:'河畔一角'
        })
        setInterval(() => {
            let sysTime = Utils.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000)
      this.getWeatherAPIData();
    }
    getWeatherAPIData() {
        let city = "北京";
        axios.jsonp({
             url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'

        }).then((res) => {
            if(res.status === "success") {
               
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPictureUrl:data.dayPictureUrl,
                    weather:data.weather
                })
            }
        })
    }
    render() {
       const menuType = this.props.menuType;
        return(
           <div className="header">
                <Row className="header-top">
                    {
                          menuType?  
                          <Col span={6} className="logo">
                            <img src="/assets/logo-ant.svg" alt="" />
                            <span>IMooc 通用管理系统</span>
                         </Col>:""   
                    }
                     <Col span={menuType?18:24}>
                         <span>欢迎， {this.state.userName}</span>
                         <a href="#:;">退出</a>
                     </Col>
                   
                </Row>
                {
                    menuType?"": 
                    <Row className="breadcrumb">
                    <Col span={4} className="breadcrumb-title">
                        {this.props.menuName}
                    </Col>
                    <Col span={20} className="weather">
                        <span className="date">{this.state.sysTime}</span>
                        {/* &nbsp; &nbsp; &nbsp; */}
                        <span className="weather-detail">
                            <img src={this.state.dayPictureUrl} alt="" />
                            
                            {this.state.weather}
                            </span>
                    </Col>
                </Row>
                }
               
           </div>
        )
    }
}
const mapStatetoProps = (state) => {
    return {
        menuName:state.menuName
    }
}
export default  connect(mapStatetoProps)(Header)
// 百度天气API接口
//http://api.map.baidu.com/telematics/v3/weather?location=beijing&output=json&ak=3p49MVra6urFRGOT9s8UBWr2
